Multiple Layouts

Description

The Multiple Layouts pane appears in the List Builder if the 'Has Multiple Layouts' property is checked on the List Properties pane.

Friendly name

The friendly name is displayed in the 'Layout Picker' which allows you to swap layouts at run-time.

Default layout

Specify if this is the Default Layout that should be shown when the List is initially displayed.

Type

Defines the layout type. The layout can be one of the following types:

Type: Description
Column: The layout will be divided into multiple columns.
Freeform: Layout is defined using HTML and Client-side templates. Freeform also supports creating a 'snaking' layout.
Kanban: A special List type to display a 'Kanban' style display. In a Kanban list, rows can be dragged-and-dropped into various categories.

Show column titles

Specify if column titles should be shown in the layout. This property is only available if the layout Type is Column.

Freeform type

This property is only available if the Type is Freeform. The Freeform type how list items are rendered in the List. Choices include:

Freeform Type: Description
Vertical: List items are rendered top to bottom in a vertical list.
Horizontal: List items are rendered right to left in a horizontal list.
Snaking: List items are rendered left to right, top to bottom in a "snaking" layout. The number of items in each row is determined by the List control's width and Item width.

Item width

The Item width defines the width of a List item. This property is only available if the layout Type is Freeform and the Freeform type is set to either Vertical or Snaking.

You can specify an explicit dimension for the item height (e.g. 300px, 1in, etc.), or you can use the keyword fill, followed by an optional modifier.

If the fill keyword is used, the List item will fill the entire height of the List.

You can specify a modifier to indicate that the List item should not fill the entire height of the List. You specify an explicit value (e.g. 40px, .5in) by which the List item is less than the List height.

For example, if you set the height to fill-10px, the List item will be 10px less than the height of the List.

Item height

The Item height defines the height of the row (i.e. List item) for a Freeform layout. If this property is left blank, the height is automatically sized to fit the content in the List row.

YOu can specify an explicit item height (e.g. 300px, 1in, etc.) or use the keyword fill followed by an optional modifier to define the height of the list item. See Item width above for more information about the fill keyword.

Kanban settings

A Kanban List is used to display List data organized into multiple categories. Records can be reordered within a category or moved from one category to another using a drag-and-drop action. The Kanban settings property is used to configure the Kanban categories, class names, in-line styles, and more.

The settings for configuring the Kanban layout are identical to the Kanban settings found on the List Properties tab. See List Layout Kanban settings to learn more.

List item class name

Specify an optional class to apply to each item in the List.

List item hover class name

Specify an optional class to apply when mouse hovers over each item in the List.

List item selected class name

Specify an optional class to apply when a List item is selected.

List item in-line style

List item in-line style property.

Has list item footer

Specify if each item (row) in the list has a free-form footer section

List item footer

Specify the HTML for the footer that appears under each List Item (i.e. each row in the list).

You can use the <listObject>.rowExpander() method to toggle the open state of the List item footer, or to explicitly open or close it.

List item footer initial state

Specify the initial state of the List Item footer. Choices include Open, Closed.

Content class name

CSS Class for container for all list items.

Client-side group breaks

Specify if the Layout has client-side group breaks. The following options are available:

Option: Description
<Use Default>: Use the group breaks defined on the List Properties tab.
Custom-for this Layout: Define group breaks that apply only to this layout.
None: No group breaks.

Group breaks definition

The Group breaks definition defines the group break(s) for the List layout. This property is identical to the Group breaks definition property found on the List Properties tab.

See the List's Group breaks definition to learn more about defining group breaks.

Has scroll settings overrides

Specify if this Layout has custom scroll properties that override the global settings for this List. Scroll settings include 'snap' (to scroll in discrete amounts), and momentum scrolling. Has scroll settings overrides is equivalent to the Custom scroll properties on the List Properties tab.

Scroll Settings Overrides

Scroll settings for the list layout can be customized if Has scroll settings overrides has been checked. By default, the List uses momentum scrolling. The Scroll Settings Overrides allow you to turn off momentum scrolling and/or enable 'snap' scrolling, which can be used to ensure the whole list record is always visible and prevent the display of partial records.

The properties below are the same as the Custom Scroll Settings on the List Properties tab (which are exposed after checking the List's Custom scroll properties property on the List Properties tab.)

Has momentum scrolling

If checked, the List control will use momentum scrolling. Momentum scrolling allows the user to scroll down the list by "flicking" the list up or down. It is recommended to turn momentum scrolling off if X axis - scroll in discrete amounts or Y axis - scroll in discrete amounts are enabled.

X axis - scroll in discrete amounts

When drag-scrolling on the x axis, should scrolling occur in discrete amounts? For example, you might want to scroll the list by 50px at a time so that no partial rows are displayed.

X axis - snap size

Specify the 'step' amount - the discrete amount by which the List is scrolled. You can specify a value in pixels, or a percentage (e.g. 100%). When you specify a percentage, the percentage is of the 'viewport' size. For example, if the 'viewport' in which the List is displayed is 300px wide, then setting the snap size to 100% is the same as setting it to 300px.

List Control - Multiple Layouts

When you design a List control, you can specify multiple Layouts. A Layout is just the manner in which the data in the List is shown. You can switch from one layout style to another at run-time.

Watch Video

Download Component